<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">	
	<link rel="stylesheet" href="css/swiper.min.css">
	<style>
		html, body {
	        position: relative;
	        height: 100%;
	    }
		body{
            margin:0;
            padding:0;
            background: #ccc;
        }
        .swiper-container{
        	width: 100%;
        	height: 100%;
        	margin: 0 auto;
        }
        .swiper-slide img{
			width:auto;
            height:auto;
            max-width:100%;
            max-height:100%;
            transform:translate(-50%,-50%);
            position:absolute;
            left:50%;
            top:50%;
		}
	</style>
</head>
<body>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="images/ad-01.jpg"> <!-- 第一张图片不使用延迟加载 -->
			</div>
			<div class="swiper-slide">
				<img data-src="images/ad-02.jpg" class="swiper-lazy">
				<!-- 添加一个延时加载中的旋转的圈 -->
				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/ad-03.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/ad-04.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			</div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>

	<script src="js/swiper.min.js"></script>
	<script>
		var swiper=new Swiper(".swiper-container",{
			pagination:".swiper-pagination", 
			paginationClickable:true,
			nextButton:".swiper-button-next",
			prevButton:".swiper-button-prev",

			/*
				延迟加载
				注：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
			*/
			preloadImages: false,//关闭预加载图像，默认为true
			lazyLoading:true,//延迟加载
	        
		});
		//加载转圈效果只有在第一次打开时候才有  
	</script>	
</body>
</html>